<template>
  <div>
    <div class="header">个人客户</div>
    <div class="content">
      <a-steps style="margin-bottom:40px;" :current="getCurrentStep()">
        <a-step title="协议签署" description/>
        <a-step title="在线注册" description/>
        <a-step title="密码设置" description/>
        <a-step title="信息填写" description/>
        <a-step title="完成" description/>
      </a-steps>
      <router-view :key="key"/>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    //   this.$message.success('This is a message of success');
    // TODO
    // get register status
    // this.$router.push("/PersonRegister/step"+st);
  },
  computed: {
    key() {
      return this.$route.path + Math.random();
    }
  },
  methods: {
    getCurrentStep() {
      const pathname = this.$route.path;
      const pathList = pathname.split("/");
      var step = pathList[pathList.length - 1];
      if (step && step.indexOf("step") >= 0) {
        let s = step.replace("step", "");
        if (s) {
          return parseInt(s) - 1;
        }
      }
      return 0;
    }
  }
};
</script>
<style scoped>
.header {
  background: lightgray;
  padding: 10px;
  text-align: center;
  font-weight: 600;
  color: #52506b;
  font-size: 16px;
}
.content {
  width: 90%;
  margin: 0 auto;
  padding: 20px;
}
</style>

